<template>
  <div>
    <el-row>
      <el-col :span="20" class="flex-start">
        <el-date-picker
          size="small"
          v-model="searchDate"
          type="daterange"
          value-format="yyyy-MM-dd HH:mm:ss"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        />
        <rehydration-ticket-status-select
          class="m-l-10"
          @change="orderStatusChange"
        />
        <filling-storage-car-number-select
          class="m-l-10"
          @change="carNoChange"
        />
        <el-input
          size="small"
          class="m-l-10 m-r-10"
          style="width: 300px"
          placeholder="请输入关键字"
          clearable
          v-model="search.queryStr"
          @change="query"
        />
      </el-col>
      <el-col :span="4" class="flex-end">
        <!--        filling-storage-order:create-->
        <el-button size="small" type="primary" @click="createTicket"
          >工单创建</el-button
        >
      </el-col>
    </el-row>
    <el-table
      class="my-table m-t-20"
      :data="data"
      v-loading="loading"
      style="width: 100%"
      border
    >
      <el-table-column type="index" align="center" label="序号" width="60" />
      <el-table-column prop="orderNo" label="工单号" width="160" />
      <el-table-column
        prop="expectCapacity"
        label="补液总量（吨）"
        width="160"
      />
      <el-table-column prop="orderCount" label="任务数量" width="90" />
      <el-table-column label="补液车辆" min-width="150">
        <template v-slot="scope">{{ scope.row.carNo | defaultValue }}</template>
      </el-table-column>
      <el-table-column label="补液员" min-width="150">
        <template v-slot="scope">{{
          scope.row.userName | defaultValue
        }}</template>
      </el-table-column>
      <el-table-column label="创建时间" width="160">
        <template v-slot="scope">{{
          scope.row.createTime | defaultValue
        }}</template>
      </el-table-column>
      <el-table-column prop="orderStatus" label="任务状态" width="90">
        <template v-slot="scope">{{
          scope.row.orderStatus | orderStatus
        }}</template>
      </el-table-column>
      <el-table-column label="完成时间" width="160">
        <template v-slot="scope">{{
          scope.row.completeTime | defaultValue
        }}</template>
      </el-table-column>
      <el-table-column
        label="实际补液量（吨）"
        width="180"
        prop="actualCapacity"
      >
        <template v-slot="scope">{{
          scope.row.actualCapacity | kg2Tons
        }}</template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" align="center" width="260">
        <template v-slot="scope">
          <auth-wrapper btn-key="filling-storage-order:detail">
            <el-button
              @click.native.prevent="detail(scope.row)"
              type="text"
              size="small"
              icon="el-icon-document"
              >查看
            </el-button>
          </auth-wrapper>
          <auth-wrapper btn-key="filling-storage-order:reassign">
            <el-button
              @click.native.prevent="reassignment(scope.row)"
              type="text"
              size="small"
              :loading="assginLoading"
              :disabled="
                scope.row.orderStatus === 2 ||
                scope.row.orderStatus === 3 ||
                scope.row.approveStatus !== 1
              "
              icon="el-icon-edit"
              >{{ scope.row.orderStatus === 0 ? "派单" : "改派" }}
            </el-button>
          </auth-wrapper>
          <auth-wrapper btn-key="filling-storage-order:reassign">
            <el-button
              @click.native.prevent="shenhe(scope.row)"
              type="text"
              size="small"
              :loading="assginLoading"
              :disabled="scope.row.approveStatus === 1"
              icon="el-icon-edit"
              >审核
            </el-button>
          </auth-wrapper>
          <auth-wrapper btn-key="filling-storage-order:cancel">
            <el-button
              @click.native.prevent="cancel(scope.row)"
              type="text"
              size="small"
              :loading="cancelLoading"
              :disabled="
                scope.row.orderStatus === 2 || scope.row.orderStatus === 3
              "
              icon="el-icon-close"
              >取消
            </el-button>
          </auth-wrapper>
        </template>
      </el-table-column>
    </el-table>

    <app-pagination
      ref="paginationRef"
      :total="total"
      class="m-t-20"
      @do-query="query"
    />

    <el-dialog
      title="改派"
      append-to-body
      :visible.sync="showReassignmentFlag"
      width="400px"
    >
      <div class="pa-12 flex-start">
        <div class="m-r-10">补液车辆</div>
        <filling-storage-car-number-select
          size="large"
          @select="
            (v) => {
              this.assignCarId = v;
            }
          "
        />
      </div>
      <div class="dividing-line m-t-20 m-b-20"></div>
      <div class="flex-end">
        <el-button
          size="small"
          type="primary"
          plain
          @click="showReassignmentFlag = false"
          >取消</el-button
        >
        <el-button
          size="small"
          type="primary"
          @click="doConfirmReassignment"
          :loading="loading"
          >确定</el-button
        >
      </div>
    </el-dialog>

    <el-dialog
      title="工单创建"
      append-to-body
      :visible.sync="createTicketFlag"
      width="1200px"
    >
      <rehydration-ticket-create-content
        v-if="createTicketFlag"
        @back="handleCreateBack"
      />
    </el-dialog>
    <el-dialog
      title="审核"
      append-to-body
      :visible.sync="showShenheFlag"
      width="400px"
    >
      <div class="pa-12 flex-start">
        <div class="m-r-10">采购单价（元/吨）</div>
        <el-input-number :min="0" v-model="form.costPrice" />
      </div>
      <div class="dividing-line m-t-20 m-b-20"></div>
      <div class="flex-end">
        <el-button
          size="small"
          type="primary"
          plain
          @click="showShenheFlag = false"
          >取消</el-button
        >
        <el-button
          size="small"
          type="primary"
          @click="doShenhe"
          :loading="loading"
          >确定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import RehydrationTicketStatusSelect from "@/components/business/rehydration-ticket-status-select";
import AppPagination from "@/components/business/app-pagination";
import {
  confirmWarning,
  getRecords,
  getTotal,
  isListEmpty,
  isNull,
  isStringEmpty,
  msgError,
  msgSuccess,
} from "@/util/common-util";
import RehydrationTicketCreateContent from "@/views/inventory/rehydration-ticket/components/rehydration-ticket-create-content";
import {
  assignOrderCar,
  cancelOrder,
  getPage,
  shenhe,
} from "@/api/business/filling-storage-order";
import FillingStorageCarNumberSelect from "@/components/business/filling-storage-car-number-select";
import AuthWrapper from "@/components/business/auth-wrapper";

export default {
  name: "rehydration-ticket-list",
  components: {
    AuthWrapper,
    FillingStorageCarNumberSelect,
    RehydrationTicketCreateContent,
    AppPagination,
    RehydrationTicketStatusSelect,
  },
  data() {
    return {
      showReassignmentFlag: false,
      showShenheFlag: false,
      createTicketFlag: false,
      currRow: {},
      searchDate: [],
      data: [],
      loading: false,
      cancelLoading: false,
      assginLoading: false,
      search: {
        partnerId: "",
        carNo: "",
        startTime: "",
        endTime: "",
        queryStr: "",
        orderStatus: null,
      },
      total: 0,
      assignCarId: null,
      form: {
        costPrice: 0,
      },
    };
  },
  mounted() {
    this.query();
  },
  filters: {
    approveStatus(v) {
      if (v === 0) return "未审核";
      if (v === 1) return "已审核";
      return "未知";
    },
    orderStatus(v) {
      // '工单状态(0-待派发 1-进行中 2-已完成 3-已取消)',
      if (v === 0) return "待派发";
      if (v === 1) return "进行中";
      if (v === 2) return "已完成";
      if (v === 3) return "已取消";
      return "未知";
    },
  },
  methods: {
    query(_page) {
      if (isNull(_page)) {
        _page = this.$refs.paginationRef.getPage();
      }
      this.loading = true;
      if (isListEmpty(this.searchDate)) {
        this.search.startTime = "";
        this.search.endTime = "";
      } else {
        this.search.startTime = this.searchDate[0];
        this.search.endTime = this.searchDate[1];
      }
      getPage(_page, this.search)
        .then((res) => {
          this.data = getRecords(res);
          this.total = getTotal(res);
          this.loading = false;
        })
        .then(() => {
          this.loading = false;
        });
    },
    orderStatusChange(v) {
      this.search.orderStatus = v;
      this.query();
    },
    carNoChange(v) {
      this.search.carNo = v;
      this.query();
    },
    handleCreateBack(flag) {
      this.createTicketFlag = false;
      if (flag) this.query();
    },
    detail(_row) {
      this.currRow = _row;
      this.$emit("detail", this.currRow);
    },
    reassignment(_row) {
      this.currRow = _row;
      this.showReassignmentFlag = true;
    },
    shenhe(_row) {
      this.currRow = _row;
      this.form.costPrice = isNull(this.currRow.costPrice)
        ? 0
        : Number(this.currRow.costPrice);
      this.showShenheFlag = true;
    },
    createTicket() {
      this.createTicketFlag = true;
    },
    cancel(_row) {
      confirmWarning("取消操作", `确定取消工单吗 ？`, () => {
        this.cancelLoading = true;
        cancelOrder(_row.id)
          .then((res) => {
            this.cancelLoading = false;
            msgSuccess();
            this.query();
          })
          .catch(() => {
            this.cancelLoading = false;
          });
      });
    },
    doConfirmReassignment() {
      if (isStringEmpty(this.assignCarId)) return msgError("请选择补液车");
      this.assginLoading = true;
      assignOrderCar(this.currRow.id, this.assignCarId)
        .then((res) => {
          this.assginLoading = false;
          msgSuccess();
          this.query();
          this.showReassignmentFlag = false;
        })
        .catch(() => {
          this.assginLoading = false;
        });
    },
    doShenhe() {
      this.loading = true;
      this.form.orderId = this.currRow.id;
      shenhe(this.form)
        .then((res) => {
          this.loading = false;
          msgSuccess();
          this.query();
          this.showShenheFlag = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.my-table {
  ::v-deep .el-button--small {
    padding: 0 5px !important;
    font-size: 14px !important;
  }

  ::v-deep td {
    padding: 8px 0 !important;
  }
}
</style>
